<template>
	<div v-loading="loading" class="box">
		<div v-if="!isPlatform" class="home-platfrom">
			<el-row class="gva-card-box">
				<el-col :span="24" :lg="17">
					<div class="title"><span>快捷菜单</span></div>
					<div class="quick-entrance">
						<div class="card-header">
							<span>常用功能</span>
						</div>
						<el-row :gutter="24">
							<el-col
								v-for="(card, key) in toolCards"
								:key="key"
								:span="8"
								:lg="4"
								:xl="4"
								class="quick-entrance-items"
								@click="toTarget(card.name)"
							>
								<div class="quick-entrance-item">
									<div class="quick-entrance-item-icon" :style="{ backgroundColor: card.bg }">
										<img style="width: 30px; height: 30px" :src="card.icon" alt="" />
									</div>
									<p>{{ card.label }}</p>
								</div>
							</el-col>
						</el-row>
					</div>
				</el-col>
				<el-col :span="24" :lg="7">
					<div class="title"><span>今日待办</span></div>
					<div class="todo">
						<div class="book-echarts">
							<div class="traffic-img">
								<img style="width: 48px" src="./images/daiban.png" alt="" />
							</div>
							<div class="pengding-info">
								<div class="pengding-count">{{ RegistrationInfoCount }}</div>
								<div class="pengding-tex">待审核授权</div>
							</div>
						</div>
					</div>
				</el-col>
			</el-row>
			<div style="margin-left: 15px" class="title"><span>数据概览</span></div>
			<el-row :gutter="24">
				<el-col
					:span="8"
					:lg="(index + 1) % 5 == 0 ? 4 : 5"
					:xl="(index + 1) % 5 == 0 ? 4 : 5"
					class="mb-24"
					v-for="(stat, index) in stats"
					:key="index"
				>
					<WidgetCounter :title="stat.title" :value="stat.value" :suffix="stat.suffix" :state="stat.state" />
				</el-col>
				<el-col :span="24" :lg="9" :xl="9">
					<div
						style="
							display: flex;
							justify-content: space-between;
							padding: 5px 10px;
							margin: 0;
							background-color: #ffffff;
							border-radius: 10px 10px 0 0;
						"
					>
						<span>预警信息</span>
						<el-pagination
							v-if="totalCount > 2"
							style="height: 25px"
							background
							@current-change="handleCurrentChange"
							:page-size="2"
							:total="totalCount"
							layout="prev, pager, next"
						/>
					</div>
					<el-table
						:show-header="false"
						:data="warnings"
						style="box-sizing: border-box; width: auto; border-radius: 0 0 10px 10px"
					>
						<el-table-column prop="describe" label="" />
						<el-table-column prop="day" label="">
							<template #default="scoped">
								<span :style="{ color: scoped.row.expired ? 'red' : 'green' }">{{
									scoped.row.expired ? scoped.row.day : "剩余" + scoped.row.day
								}}</span>
							</template>
						</el-table-column>
					</el-table>
				</el-col>
			</el-row>
			<div class="echarts-box">
				<el-row :gutter="24">
					<el-col :span="24" :lg="12">
						<div class="card card-box">
							<div class="echartsHeader">
								<div class="iconInfo">新增用户趋势</div>
								<div>
									<el-radio-group v-model="tabPosition" @change="handleSelectDateChange" style="margin-bottom: 30px">
										<el-radio-button :label="0">周</el-radio-button>
										<el-radio-button :label="1">月</el-radio-button>
										<el-radio-button :label="2">年</el-radio-button>
									</el-radio-group>
								</div>
							</div>
							<Pie id="newCustomr" ref="newCustomerDom"></Pie>
						</div>
					</el-col>
					<el-col :span="24" :lg="12">
						<div class="card card-box">
							<div class="echartsHeader">
								<div class="iconInfo">用户访问趋势</div>
								<div>
									<el-radio-group v-model="visitTabs" style="margin-bottom: 30px">
										<el-radio-button :label="0">周</el-radio-button>
										<el-radio-button :label="1">月</el-radio-button>
										<el-radio-button :label="2">年</el-radio-button>
									</el-radio-group>
								</div>
							</div>
							<Pie id="visit" ref="visitUserDom"></Pie>
						</div>
					</el-col>
				</el-row>
			</div>
		</div>
		<div v-else class="home card">
			<img class="home-bg" src="@/assets/images/welcome.png" alt="welcome" />
		</div>
	</div>
</template>

<script setup lang="ts" name="dashboard">
import * as echarts from "echarts";
import { ref, reactive, onMounted, nextTick, watch } from "vue";
import { ECharts } from "echarts";
import { useRouter } from "vue-router";
import Pie from "@/components/MyBeseEcharts/index.vue";
import saishi from "./images/saishi.png";
import baoming from "./images/baoming.png";
import project from "./images/project.png";
import chengji from "./images/chengji.png";
import ketangshouquan from "./images/ketangshouquan.png";
import api from "@/api/modules/dashboard";
import news from "./images/news.png";
import WidgetCounter from "@/components/WigteCounter/index.vue";
import { GlobalStore } from "@/stores";
const { isPlatform } = GlobalStore();
const router = useRouter();
const toolCards = ref([
	{
		label: "授权审核",
		icon: ketangshouquan,
		name: "/system/audit",
		color: "#ff9c6e",
		bg: "rgba(255, 156, 110,.3)"
	},
	{
		label: "赛事管理",
		icon: saishi,
		name: "/competition",
		color: "#69c0ff",
		bg: "rgba(105, 192, 255,.3)"
	},
	{
		label: "报名管理",
		icon: baoming,
		name: "/competition/registration",
		color: "#b37feb",
		bg: "rgba(179, 127, 235,.3)"
	},
	{
		label: "创建赛事",
		icon: project,
		name: "/competition",
		color: "#ffd666",
		bg: "rgba(255, 214, 102,.3)"
	},
	{
		label: "成绩管理",
		icon: chengji,
		name: "/competition/score",
		color: "#ff85c0",
		bg: "rgba(255, 133, 192,.3)"
	},
	{
		label: "新增资讯",
		icon: news,
		name: "/information",
		color: "#5cdbd3",
		bg: "rgba(92, 219, 211,.3)"
	}
]);
const toTarget = (name: any) => {
	router.push(name);
};
// 页面加载动画启动
const loading = ref<boolean>(false);
// 新增用户趋势tbas
const tabPosition = ref(0);
// 用户访问趋势tabs
const visitTabs = ref<number>(0);
// 待审核数量
const RegistrationInfoCount = ref(0);
// 预警信息总条数
const totalCount = ref<number>(0);
interface WarningList {
	day: string;
	describe: string;
	expired: boolean;
}
const warnings = ref<Array<WarningList>>([]);
const stats = ref<Array<any>>([
	{
		title: "累计注册用户",
		value: 0,
		prefix: "$",
		suffix: "相比昨日 +0.00%",
		state: 1
	},
	{
		title: "累计赛事",
		value: 0,
		suffix: "相比昨日 +0.00%",
		state: 1
	},
	{
		title: "今日注册用户",
		value: 0,
		prefix: "+",
		status: "danger",
		suffix: "相比昨日 +0.00%",
		state: 0
	},
	{
		title: "今日访问用户",
		value: 0,
		prefix: "$",
		suffix: "相比昨日 +0.00%",
		state: 0
	},
	{
		title: "今日新增赛事",
		value: 0,
		prefix: "$",
		suffix: "相比昨日 +0.00%",
		state: 1
	},
	{
		title: "今日比赛场次",
		value: 0,
		suffix: "相比昨日 +0.00%",
		state: 1
	},
	{
		title: "今日比赛用户",
		value: 0,
		prefix: "+",
		status: "danger",
		suffix: "相比昨日 +0.00%",
		state: 1
	},
	{
		title: "今日报名用户",
		value: 0,
		prefix: "$",
		suffix: "相比昨日 +0.00%",
		state: 0
	}
]);
const handleCurrentChange = async (val: number) => {
	let res3 = await api.GetWarningListApi({ pageIndex: val });
	totalCount.value = res3.result.totalCount;
	warnings.value = [...(res3.result.data as WarningList[])];
};
/* 声明echarts实例 */
interface ChartProps {
	[key: string]: ECharts | null;
}
/* 获取子组件的ref */
interface ChartExpose {
	initChart: (params: any) => ECharts;
}
//新增用户趋势图表option
const newCustomerDom = ref<ChartExpose>();
const newCustomerOption = ref<any>({
	tooltip: {
		trigger: "axis",
		axisPointer: {
			type: "cross",
			label: {
				backgroundColor: "#6a7985"
			}
		}
	},
	grid: {
		left: "3%",
		right: "4%",
		bottom: "3%",
		containLabel: true
	},
	xAxis: {
		type: "category",
		data: []
	},
	yAxis: {
		type: "value",
		min: 0,
		max: 20,
		interval: 4,
		axisLabel: {
			formatter: function (value: any) {
				return value;
			}
		}
	},
	series: [
		{
			data: [100, 1646, 164, 5995, 16565, 1111, 333],
			type: "line",
			symbol: "none"
		}
	]
});
//用户访问趋势图表option
const visitUserDom = ref<ChartExpose>();
const visitUserOption = reactive<any>({
	tooltip: {
		trigger: "axis",
		axisPointer: {
			type: "cross",
			label: {
				backgroundColor: "#6a7985"
			}
		}
	},
	grid: {
		left: "3%",
		right: "4%",
		bottom: "3%",
		containLabel: true
	},
	xAxis: [
		{
			type: "category",
			boundaryGap: false,
			data: ["星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期天"]
		}
	],
	yAxis: {
		type: "value",
		min: 0,
		max: 5000,
		interval: 1000
	},
	series: [
		{
			type: "line",
			stack: "Total",
			smooth: true,
			lineStyle: {
				width: 0
			},
			showSymbol: false,
			areaStyle: {
				opacity: 0.8,
				color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
					{
						offset: 0,
						color: "rgb(128, 255, 165)"
					},
					{
						offset: 1,
						color: "rgb(1, 191, 236)"
					}
				])
			},
			emphasis: {
				focus: "series"
			},
			data: [1800, 1451, 3575, 2564, 4561, 1564, 4513]
		}
	]
});
//两个图标实例
const dataScreen: ChartProps = {
	chart1: null,
	chart2: null
};
/* 初始化 echarts */
const initCharts = (): void => {
	dataScreen.chart1 = newCustomerDom.value?.initChart(newCustomerOption.value) as ECharts;
	dataScreen.chart2 = visitUserDom.value?.initChart(visitUserOption) as ECharts;
};
/* 浏览器监听 resize 事件 */
const resize = () => {
	Object.values(dataScreen).forEach(chart => {
		chart && chart.resize();
	});
};
watch(
	() => newCustomerOption.value.xAxis.data,
	() => {
		nextTick(() => {
			dataScreen.chart1?.setOption(newCustomerOption.value, true);
		});
	}
);
const executeInOrder = async (methods: any) => {
	const promises = methods.map((method: any) => method());
	const results = await Promise.all(promises);
	let data = results.map(i => i.result.data);
	return data;
};
const getData = async () => {
	loading.value = true;
	try {
		// 获取新增用户趋势
		let res1 = await api.GetAddUserTendencyApi({ State: tabPosition.value });
		// 获取预警信息列表
		let res3 = await api.GetWarningListApi({ pageIndex: 1 });
		totalCount.value = res3.result.totalCount;
		// 获取待审核的客户信息总数
		let res8 = await api.GetPendingRegistrationInfoCountApi();
		RegistrationInfoCount.value = res8.result.data;
		let arr: Array<any> = [
			api.GetAccumulativeRegistrUsersApi,
			api.GetAccumulativeCompetitionCountApi,
			api.GetAccumulativeRegistrUsersToDayApi,
			// 访问
			api.GetPendingRegistrationInfoCountApi,
			api.GetAccumulativeCompetitionToDayCounttApi,
			api.GetToDayCompetitionApi,
			api.GetToDayGameoUserApi,
			api.GetToDayRegiisterInfoApi
		];
		let resList = await executeInOrder(arr);
		stats.value.forEach((v, i) => {
			if (i == 3) return;
			let today = parseInt(resList[i].todayCount);
			let yesterday = parseInt(resList[i].yesterdayCount);
			let sign = today > yesterday ? "+" : today < yesterday ? "-" : "";
			let per = "";
			if (today > yesterday) {
				per = yesterday > 0 ? (((today - yesterday) / yesterday) * 100).toFixed(2) : "100.00";
			} else if (today < yesterday) {
				per = today > 0 ? (((yesterday - today) / yesterday) * 100).toFixed(2) : "100.00";
			}
			v.value = resList[i].count;
			v.suffix = `相比昨日 ${sign}${per ? per + "%" : "--"}`;
			v.state = resList[i].state;
		});
		warnings.value = [...(res3.result.data as WarningList[])];
		let customData = Object.keys(res1.result.data);
		let customDataY: any = Object.values(res1.result.data);
		newCustomerOption.value.xAxis.data = customData;
		newCustomerOption.value.series[0].data = customDataY;
		if (Math.max(...customDataY) < 1) return;
		newCustomerOption.value.yAxis.max = Math.ceil(Math.max(...customDataY) / 5) * 5;
		newCustomerOption.value.yAxis.interval = Math.ceil(Math.max(...customDataY) / 5);
	} catch (error: any) {
		new Error(error);
	} finally {
		loading.value = false;
	}
};
getData();
const handleSelectDateChange = async (val: any) => {
	let { result } = await api.GetAddUserTendencyApi({ State: val });
	let customData = Object.keys(result.data);
	let customDataY: any = Object.values(result.data);
	newCustomerOption.value.xAxis.data = customData;
	newCustomerOption.value.series[0].data = customDataY;
	if (Math.max(...customDataY) < 1) return;
	newCustomerOption.value.yAxis.max = Math.ceil(Math.max(...customDataY) / 5) * 5;
	newCustomerOption.value.yAxis.interval = Math.ceil(Math.max(...customDataY) / 5);
};
onMounted(() => {
	/* 初始化echarts */
	initCharts();
	// 为浏览器绑定事件
	window.addEventListener("resize", resize, false);
});
</script>

<style scoped lang="scss">
@mixin flex-center {
	display: flex;
	align-items: center;
}
::v-deep.title {
	display: flex;
	align-items: flex-end;
	margin: 20px 0;
	span {
		position: relative;
		font-size: 22px;
		line-height: 22px;
		color: #000000;
		text-align: center;
		&::before {
			position: absolute;
			top: 0;
			left: -8px;
			width: 2px;
			height: 95%;
			content: "";
			background-color: #409eff;
		}
	}
}
.echartsHeader {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}
.gva-card-box {
	box-sizing: border-box;
	padding: 15px;
	.quick-entrance {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 15px;
		margin-right: 15px;
		margin-bottom: 15px;
		background-color: #ffffff;
		border-radius: 12px;
		box-shadow: 0 20px 27px rgb(0 0 0 / 5%);
		.card-header {
			margin-bottom: 20px;
		}
		.quick-entrance-items {
			@include flex-center;

			justify-content: center;
			color: #333333;
			text-align: center;
			.quick-entrance-item {
				height: auto;
				padding: 16px 28px;
				margin-top: -16px;
				margin-bottom: -16px;
				text-align: center;
				cursor: pointer;
				&-icon {
					justify-content: center;
					width: 50px;
					height: 50px !important;
					margin: 0 auto;
					border-radius: 50%;
					@include flex-center;
					i {
						font-size: 24px;
					}
				}
				p {
					margin-top: 10px;
				}
			}
		}
	}
	.todo {
		box-sizing: border-box;
		padding: 40px;
		background-color: #ffffff !important;
		border-radius: 12px;
		box-shadow: 0 20px 27px rgb(0 0 0 / 5%);
		.book-echarts {
			display: flex;
			padding: 20px;
			.pengding-info {
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				justify-content: space-between;
				margin-left: 20px;
				.pengding-count {
					font-size: 20px;
					font-weight: 600;
				}
			}
		}
	}
}
.card-box {
	margin: 5px;
}
.box {
	width: 100%;
	height: 100%;
	.home {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
		.home-bg {
			width: 70%;
			max-width: 1200px;
			margin-bottom: 20px;
		}
	}
}
</style>
